<!DOCTYPE html>
<html>
   <head>
      <title>主页</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
       <!-- 引入 Bootstrap -->
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
       <script src="https://code.jquery.com/jquery.js"></script>
       <!-- 包括所有已编译的插件 -->
       <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body style="padding-top: 90px;">
        <script type="text/javascript">
            function load(){//加载界面时数据加载
                $.ajax({
                    type:'',
                    url:"",
                    data:{

                    },
                    success:function(){

                    }
                })
            }
            function hotspot(){
                $.ajax({
                    type:'',
                    url:"",
                    data:{

                    },
                    success:function(){

                    },
                    error:function () {//弹窗，后面可以删除
                        alert("failed")
                    }
                })
            }
            function excomputer(){//具体电脑信息
                $.ajax({
                    type:'',
                    url:"",
                    data:{

                    },
                    success:function(){

                    },
                    error:function () {//弹窗，后面可以删除
                        alert("failed")
                    }
                })
            }
        </script>
        <div class="container-fluid"">
        <!--导航栏-->
            <div class="row-fluid">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #660066;">
                        <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" style="margin-left: 20px;color: rgb(255, 255, 255);" href="home.html">主页</a>
                        </div>
                        <div>
                            <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size: 18px;margin-left: 40px;color: rgb(255, 255, 255);">
                                    硬件信息 
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" style="background-color: #660066;">
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">CPU</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">显卡</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">内存</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">硬盘</a></li>
                                    <li><a href="硬件知识.html" style="font-size: 18px;color: rgb(255, 255, 255);">笔记本</a></li>
                                </ul>
                            </li>
                            </ul>
                        </div>
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#" style="margin-left: 40px;color: rgb(255, 255, 255);">社区交流</a>
                        </div>
                        <div>
                            <form class="navbar-form navbar-left" role="search" style="margin-left: 650px;">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="输入查找的内容" style="width: 300px;"/>
                            </div>
                            <a href="https://www.baidu.com/">
                                <img src="search.png" width="35px" height="35px"/>
                            </a>
                            </form>
                        </div>
                        <div>
                            <a href="https://www.baidu.com/"><img src="头像.png" style="width: 37px;margin-top: 8px;"/></a>
                        </div>
                        </div>
                    </nav>
            </div>

            <div class="row-fluid">
                <!--左端功能页面栏-->
                <div class="col-md-2" style="margin-left:0px;margin-top:40px;">
                    <div class="panel-group" id="accordion" >
                        <div class="panel panel-default" >
                            <div class="panel-heading" style="background-color: purple;">
                                <h5 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">                     
                                        <h5><span class="glyphicon glyphicon-th-list" style="color: rgb(231, 237, 238); font-size: 20px;"> 功能页面</span></h5>
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div class="list-group">
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="热点资讯.html">热点资讯</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="硬件匹配.html">硬件匹配</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="key_word_search.html">关键字匹配</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="电脑猎场.html">电脑猎场</a>
                                    </div>     
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--内容界面-->
                <div class="col-md-10" style="margin-top:40px;border:solid 3px purple;">
                    <!--资讯轮播图-->
                    <div class="row-fluid">
                            <div class="col-md-1 column">
                            </div>
                            <div class="col-md-10 column">
                                    <div class="page-header">
                                        <h1 style="font-family: 微软雅黑;font-weight: bold;">热点资讯</h1>
                                    </div>
                                <div id="myCarousel" class="carousel slide">
                                        <!-- 轮播（Carousel）指标 -->
                                        <ol class="carousel-indicators">
                                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                            <li data-target="#myCarousel" data-slide-to="1"></li>
                                            <li data-target="#myCarousel" data-slide-to="2"></li>
                                        </ol>   
                                        <!-- 轮播（Carousel）项目 -->
                                        <div class="carousel-inner">
                                            <div class="item active">
                                                <a onclick="hotspot()"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2634172790,2987999199&amp;fm=26&amp;gp=0.jpg" alt="First slide"/></a>
                                            </div>
                                            <div class="item">
                                                <a onclick="hotspot()"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1032169849,3240386588&amp;fm=26&amp;gp=0.jpg" alt="Second slide"/></a>
                                            </div>
                                            <div class="item">
                                                <a onclick="hotspot()"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861115627,2732340871&amp;fm=26&amp;gp=0.jpg" alt="Third slide"/></a>
                                            </div>
                                        </div>
                                        <!-- 轮播（Carousel）导航 -->
                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                </div> 
                                <div class="page-header">
                                        <h1 style="font-family: 微软雅黑;font-weight: bold;">今日推荐
                                            <small>大家好，我是练习时长两年半的个人练习生</small>
                                        </h1>
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                          <a onclick="excomputer()"><img src="timg.jpg" alt="..." class="img-responsive" /></a>
                                          <div class="caption">
                                            <h4>Alienware</h4>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                          <a onclick="excomputer()"><img src="timg.jpg" alt="..." class="img-responsive" /></a>
                                          <div class="caption">
                                            <h4>Alienware</h4>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                        <a onclick="excomputer()"><img src="timg.jpg" alt="..." class="img-responsive" /></a>
                                          <div class="caption">
                                            <h4>Alienware</h4>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                          <a onclick="excomputer()"><img src="timg.jpg" alt="..." class="img-responsive" /></a>
                                          <div class="caption">
                                            <h4>Alienware</h4>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                            </div>
                            <div class="col-md-1 column">
                            </div>
                            
                    </div>
                    <!--标题-->
                    <div class="row-fluid">
                    </div>


                </div>
            </div>
        </div>
    </body>
</html>